<template>
    <TableH5
      :columns="columns"
      :data="tableData"
      :total="total"
      @edit="handleEdit"
      @delete="handleDelete"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import TableH5 from '@/components/TableH5.vue'


//表头项 width代表宽度 align 可以设置列是否居中 靠右 靠左 默认居中
  const columns = ref([
    { prop: 'name', label: '姓名', align: "right", },
    { prop: 'age', label: '年龄', width: 180 },
    { prop: 'address', label: '地址' ,width: 180 }
  ])
  //数据
  const tableData = ref([
  ]) 
  const total = ref(100)
  const generateFakeData=()=>{
      const data = [];
      for (let i = 1; i <= 10; i++) {
        data.push({
          id: i,
          name: `User ${i}`,
          age: 20 + Math.floor(Math.random() * 10),
          address: `user${i}@example.com`
        });
      }
      console.log(data);
      tableData.value = data;
    }
    generateFakeData()
  const handleEdit = (row) => {
    console.log('编辑', row)
  }
  
  const handleDelete = (row) => {
    console.log('删除', row)
  }
  
  const handlePageChange = (page) => {
    console.log('页码变化', page)
  }
  
  const handleSizeChange = (size) => {
    console.log('分页大小变化', size)
  }
  </script>